$(function () {
  // 接收id,根据id获取文章所有信息,给form赋值
  function initForm () {
    let id = location.href.split('=')[1]
    // 发送axios
    axios({
      url: '/my/article/'+id,
      method: 'get'
    }).then(res => {
      //成功回调
      // console.log(res.data)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      // 成功后赋值
      form.val('formEdit', res.data.data)
      // 富文本赋值
      setTimeout(function () {
        tinyMCE.activeEditor.setContent(res.data.data.content)
      }, 500)
      //封面赋值
      let baseURL = 'http://api-breakingnews-web.itheima.net'
      let url = baseURL + res.data.data.cover_img
      $image
        .cropper('destroy') // 销毁旧的裁剪区域
        .attr('src', url) // 重新设置图片路径
        .cropper(options) // 重新初始化裁剪区域
    })
  }

  // 初始化文章分类列表 封装成函数
  let layer = layui.layer
  let form = layui.form
  initArtCateList()

  function initArtCateList () {
    axios({
      url: '/my/article/cates'
    }).then(res => {
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      //成功 渲染
      let arr = [`<option value="">请选择文章类别</option>`]
      res.data.data.forEach(ele => {
        if (ele.Id > 0)
          arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
                `)
      })
      // 循环结束赋值
      let str = arr.join('')
      $('[name=cate_id]')
        .empty()
        .html(str)
      // form.render() 可以渲染layui中的 select/checkbox/radio
      form.render()
      initForm()
    })
  }

  // 初始化富文本编辑器
  initEditor()

  // 1. 初始化图片裁剪器
  var $image = $('#image')
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 3. 初始化裁剪区域
  $image.cropper(options)

  // 定义状态
  let state = ''
  $('#btn1').on('click', function () {
    state = '已发布'
  })
  $('#btn2').on('click', function () {
    state = '草稿'
  })

  // 选择图片 渲染图片
  $('#chooseImageBtn').on('click', function () {
    $('#chooseImageInp').click()
  })
  $('#chooseImageInp').on('change', function (e) {
    // 1. 拿到用户选择的文件
    var file = e.target.files[0]
    //  2. 根据选择的文件，创建一个对应的 URL 地址：
    if (file == undefined) {
      return
    }
    var newImgURL = URL.createObjectURL(file)
    //  3. 先`销毁`旧的裁剪区域，再`重新设置图片路径`，之后再`创建新的裁剪区域`：
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', newImgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  })

  // 文章发布
  $('#formPub').on('submit', function (e) {
    //阻止表单默认提交
    e.preventDefault()
    let fd = new FormData(this)
    // 添加状态字段
    fd.append('state', state)

    // 生成图片
    $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {
        // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作   -生成文件是异步操作
        fd.append('cover_img', blob)
        console.log(...fd)
        //发送ajax
        axios({
          method: 'post',
          url: '/my/article/edit',
          data: fd
        }).then(res => {
          if (res.data.status !== 0) {
            return layer.msg(res.data.message)
          }
          // 成功提示
          //   if (state = '已发布') {
          layer.msg('修改文章成功')

          //   }else if(state = '草稿'){
          //     layer.msg('文章存为草稿')
          //   }
          setTimeout(function () {
            window.parent.document.querySelector('#art_list').click()
          }, 2000)
        })
      })
  })
})
